<template>
  <div class="icon-stats-row">
    <!-- 左侧图标 -->
    <div class="icon-container">
      <img
          :src="iconSrc"
          :alt="iconAlt"
          class="stat-icon"
      >
    </div>

    <!-- 右侧数据块容器（超出隐藏） -->
    <div class="stats-container">
      <div class="stats-inner">
        <div
            class="stat-item"
            v-for="(item, index) in statsData"
            :key="index"
        >
          <div class="stat-number">{{ item.number }}</div>
          <div class="stat-label">{{ item.label }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'IconStatsRow',
  props: {
    // 图标文件名（位于 src/assets/icon 目录）
    icon: {
      type: String,
      required: true
    },
    // 图标alt文本
    iconAlt: {
      type: String,
      default: ''
    },
    // 统计数据列表
    statsData: {
      type: Array,
      required: true,
      validator: (value) => {
        return value.every(item =>
            typeof item === 'object' &&
            'number' in item &&
            'label' in item
        );
      }
    }
  },
  computed: {
    // 计算完整图标路径
    iconSrc() {
      return require(`@/assets/icon/${this.icon}`);
    }
  },
  methods: {
  }
};
</script>

<style scoped>
.icon-stats-row {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 8px 13px;
  box-sizing: border-box;
  gap: 8px;
  border-radius: 8px;
  white-space: nowrap;
}

.icon-container {
  flex-shrink: 0; /* 图标不压缩 */
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stat-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.stats-container {
  flex: 1; /* 占满剩余宽度 */
  overflow: hidden; /* 核心：超出部分隐藏 */
  position: relative;
}

.stats-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  left: 0;
  top: 0;
}

.stat-item {
  display: flex;
  flex-direction: column;
  min-width: 50px;
}

.stat-number {
  font-size: 16px;
  font-weight: 600;
  color: #fa0000;
  line-height: 1.2;
}

.stat-label {
  font-size: 12px;
  margin-top: 3px;
}
</style>
